import React from "react";
import styled from "@emotion/styled";
import { ButtonNoPadding, Row } from "components/lib";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter as Router } from "react-router-dom";
import { ProjectList } from "views/project-list";
import { ProjectScreen } from "views/project";
import { resetRoute } from "utils";
import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { ProjectPopover } from "components/popover";
import { ProjectModal } from "views/project-list/modal";

export default () => (
  <Container>
    <Router>
      <PageHeader />
      <Main>
        <Routes>
          <Route path={"/projects"} element={<ProjectList />} />
          <Route path={"/projects/:projectId/*"} element={<ProjectScreen />} />
          <Navigate to={"/projects"} />
        </Routes>
      </Main>
      <ProjectModal />
    </Router>
  </Container>
);

const PageHeader = () => (
  <Header between={true}>
    <HeaderLeft gap={true}>
      <ButtonNoPadding type={"link"} onClick={resetRoute}>
        <SoftwareLogo width={"18rem"} color={"rgb(38, 132, 255)"} />
      </ButtonNoPadding>
      <ProjectPopover />
      <span>用户</span>
    </HeaderLeft>

    <HeaderRight></HeaderRight>
  </Header>
);

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`;

const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;

const Main = styled.main`
  display: flex;
  overflow: hidden;
`;

const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;
